<template>
  <div class="table-choose">
    <p class="title">{{table.title}}</p>
    <table class="table" border bordercolor="#999">
      <thead>
        <tr>
          <th v-for="(item, index) of table.dataTitle" :key="index">
            {{ item }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) of table.content"
          :key="index"
          @click="selectRow(item)"
          :class="{ active: item.checked, disable: !item.enable }"
        >
          <td v-for="(subitem, subindex) of item.data" :key="subindex">
            <p class="text-ellipsis">{{ subitem }}</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default: () => ({}),
    },
    vcPrintTypeId:{ type:String,default:'' }
  },
  data() {
    return {};
  },
  methods: {
    selectRow(row) {
      if (!row.enable) {
        this.$toast("该项不能选择");
        return;
      }
      this.$set(row, "checked", !row.checked);
    },
    getParams(){
      // 拿到用户选中的
      let values = this.table.content.filter(v => v.checked).map(v => v.value).join(',');
      let params = {
        [this.table.id]:values
      };
      return params;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
.table-choose {
  padding: .266667rem /* 10/37.5 */;
  max-height: 10rem;
  overflow:scroll;
  border:1px solid #eee;
  border-radius:.266667rem /* 10/37.5 */;
  margin:.266667rem /* 10/37.5 */;
  .title{
    margin-bottom:.266667rem /* 10/37.5 */;
    font-size:.313333rem +$fontsize/* 14/37.5 */;
    color:#111;
  }
  .table {
    border-collapse: collapse;
    tr {
      transition: all 0.3s linear;
      &.active {
        background: $primary;
        color: #fff;
      }
      &.disable {
        background: #ececec;
        color: #111;
      }
    }
    th,
    td {
      min-width: 2.666667rem /* 100/37.5 */;
      text-align: center;
      padding: .266667rem /* 10/37.5 */;
    }
  }

  // text overflow 文字溢出显示省略号
  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    // 设置文本不能换行
    white-space: nowrap;
  }
}
</style>
